<template>
  <div class="swiperadd">
    <!-- 面包屑导航 -->
    <mybreadcrumb />

    <!-- 新增轮播图表单 -->
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="form"
      status-icon
    >
      <el-form-item label="图片地址" prop="img">
        <el-input v-model="ruleForm.img" />
      </el-form-item>
      <el-form-item label="图片链接" prop="link">
        <el-input v-model="ruleForm.link" />
      </el-form-item>
      <el-form-item label="图片提示" prop="alt">
        <el-input v-model="ruleForm.alt" />
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          新增
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import service from '@/api'
import {useRouter} from 'vue-router'

var $router =  useRouter()

var ruleFormRef = ref();

var ruleForm = ref({
  link:'',
  alt:'',
  img:''
})

var rules = ref({
  img: [{ required: true, message: '请输入图片地址', trigger: 'change' }],
  link: [{ required: true, message: '请输入图片链接', trigger: 'change' }],
  alt: [{ required: true, message: '请输入图片提示', trigger: 'change' }],
})

var submitForm = ()=>{
  //手动校验表单内容
  ruleFormRef.value.validate(async (valid)=>{
    if( valid ){
      //发请求,新增轮播图
      var res = await service.banner.banner_add(ruleForm.value);
      //跳转到轮播图列表页
      $router.back();
    }else{
      console.log('no');
    }
  })
}

</script>

<style scoped lang='scss'>
.swiperadd{
  .form{
    margin: 20px 0;
    max-width: 600px;
  }
}
</style>